.backgroundImage {
    height: 100vh;
    /* 全屏高度 */
    background-position: bottom center;
    /* 水平方向右对齐，垂直方向居中 */
    background-repeat: no-repeat;
    background-size: cover;
    /* 图片覆盖整个区域 */
}

.character {
    width: 200px;
}

.footprints {
    position: absolute;
    width: 100px;
    transform: rotate(30deg);
    visibility: hidden;
}

.footprints.visible {
    visibility: visible;
}

.num4 {
    left: calc(0.35 * var(--screenWidth));
    top: calc(0.58 * var(--screenHeight));
}

.magnifierImage {
    width: 150px;
    position: absolute;
    pointer-events: none;
    z-index: 640;
    /* 使放大镜不影响其他元素的事件 */
}

.card1 {
    box-sizing: border-box;
    width: 799px;
    height: 524px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background: url('../../assets/p1/triggerwithCalculator.png');
    padding: 15px;

}

.card1 div {
    font-size: 50px;
    color: white;
    margin: 0 auto;
    text-align: center;
}

.card2 {
    box-sizing: border-box;
    width: 60%;
    height: 75%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background: url('../../assets/p1/triggerwithCalculator.png');
    padding: 50px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

}


.card2 div {
    font-size: 50px;
    color: white;
    margin-bottom: 20px;
    text-align: center;
}

.card2 .intro {
    font-size: 50px;
    color: white;
    margin-bottom: 50px;
    text-align: left
}

.card2 img {
    margin: 0 auto;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

.card3_4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    z-index: 1000;
    width: 100%;
    height: 88vh;
}

.card3 {
    width: 35%;
    background: url('../../assets/p1/plane-calculator.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1001
}

.card4 {
    position: relative;
    box-sizing: border-box;
    margin-left: 5vw;
    width: 47%;
    background: url('../../assets/p1/shaoguang.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 1001;
    display: flex;
}

.card4 img {
    position: absolute;
    width: 15%;
    z-index: 1001;
    opacity: 0;
    /* 默认隐藏 */
}

.card4 img:nth-child(1) {
    top: 18%;
}

.card4 img:nth-child(2) {
    top: 36%;
}

.card4 img:nth-child(3) {
    top: 54%;
}

.card4 img:nth-child(4) {
    top: 72%;
}

.card4 .visible {
    opacity: 1;
}

.next {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f0ded0;
    border-color: #c07f4b;
    border-width: 6px;
    border-style: solid;
    /* 添加边框样式 */
    width: 160px;
    font-size: 40px;
    padding: 10px;
    z-index: 1000;

}